<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>登入好吧</title>
  <link rel="stylesheet" href="/static/css/bootstrap.min.css">
  <link rel="stylesheet" href="/static/css/js.css">
</head>

<body>

  <div class="tupian" style="position: absolute;height: 100%; width: 100%;z-index: -1;">
    <img src="/img/12.jpg" width="100%" height="100%"></div>

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
            aria-expanded="false">
            Dropdown
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </li>
      </ul>
      <form class="form-inline my-2 my-lg-0">
        <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>






  <div class="container shadow" style="width: 32rem;margin-top: 16rem; ">
    <div class="row">
      <div class="col-sm">
        <form action="/loginDone" id="loginForm" method="POST">
          <div class="form-group">
            <label for="Username">用户名</label>
            <input type="text" class="form-control" id="Username" name="Username" aria-describedby="emailHelp">
            <small id="emailHelp" class="form-text text-muted">用户名区分大小写</small>
          </div>
          <div class="form-group">
            <label for="Password1">密码</label>
            <input type="password" class="form-control" id="Password" name="Password">
          </div>
          <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" id="exampleCheck1">
            <label class="form-check-label" for="exampleCheck1">保存登入状态</label>
          </div>
          <button type="button" class="btn btn-primary" onclick="fun()">注册</button>
          <button type="button" class="btn btn-primary" onclick="login()">登入</button>
        </form>
      </div>

    </div>
  </div>
  <script src="/static/js/jquery-3.6.0.min.js"></script>
  <script src="/static/js/bootstrap.min.js"></script>
  <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
  <script>
    function login() {
      // 获取表单数据
      let uid = $('#Username').val();
      let pwd = $('#Password').val();
      console.log(uid);
      console.log(pwd);
      // 判断用户名、密码是否为空，为空则提示；不为空则向服务器提交
      if (uid.length > 0 && pwd.length > 0) {
        axios({
          method: 'POST',//返回方式
          url: '/loginDone',//接收数据页面
          data: $('#loginForm').serialize(),//返回的表单数据id
          //成功返回了数据
        }).then(function (res) {
          // axios工具下，服务器真正返回的数据在返回对象的data中
          res = res.data;
          if (res.code === 200) {
            window.location.href = '/Tellme';
          } else {
            alert_fn(res.msg);
            console.log(res.msg);
          }
        }).catch((err) => {
          alert_fn(err);

        });
      } else {
        alert_fn('用户名、密码不能为空');
      }

    }
    function alert_fn(msg) {
      msg = msg || '密码不能为空，两次密码应该一致';
      // 替换提示的内容w
      $('#msgId').text(msg);
      // 移除不显示的class，则alert将显示
      $('.alert').removeClass('invisible');
      // 三秒中后，给alert增加不显示的class，则alert重新隐藏
      setTimeout(() => {
        $('.alert').addClass('invisible');
      }, 3000);
    }
    function fun() {
      window.location.href = "./register"
    }</script>
</body>

</html>